<template>
    <el-form inline class="form-item-column column-2" label-width="95px">
        <div>
            <el-form-item label="物料图片 :" prop="productImage">
                <el-image :src="data.productImage" :preview-src-list="[data.productImage]"/>
            </el-form-item>
        </div>
        <el-form-item label="物料名称 :">{{ data.productName }}</el-form-item>
        <el-form-item label="物料编码 :">{{ data.productNo }}</el-form-item>
        <el-form-item label="所属分类 :">{{ data.productChildCategory }}</el-form-item>
        <el-form-item label="二级分类 :">{{ data.productCategory }}</el-form-item>
        <el-form-item label="客户 :">{{ data.productCustomer }}</el-form-item>
        <el-form-item label="批次号 :">{{ data.productBatchNo }}</el-form-item>
        <el-form-item label="规格 :">{{ data.productSku }}</el-form-item>
        <el-form-item label="颜色 :">{{ data.productColour }}</el-form-item>
        <el-form-item label="库存 :">{{ data.productStock }}</el-form-item>
        <el-form-item label="库存预警 :">{{ data.productStockWarning }}</el-form-item>
        <el-form-item label="允许负库存 :">{{ data.productNegative === negativeEnum.allow ? '是' : '否' }}</el-form-item>
        <el-form-item label="供应商 :" v-if="data.productChildCategory=='原材料'||data.productChildCategory=='其他'">{{ data.productSupplier }}</el-form-item>
        <!--表格-->
        <div class="form-table" v-if="data.needsList">
            <label class="el-form-item__label">生产所需 :</label>
            <el-table :data="data.needsList">
                <el-table-column label="物料编号" prop="productNo"/>
                <el-table-column label="物料名称" prop="productName"/>
                <el-table-column label="数量" prop="productNum"/>
            </el-table>
        </div>
    </el-form>
</template>

<script>
import {negativeEnum} from "../../../const/const";

export default {
    props: ['data', 'categoryList'],
    data() {
        return {
            negativeEnum
        }
    },
    computed: {}
}
</script>

<style lang="scss" scoped>
.el-form {
    .el-form-item {
        display: flex;
        align-items: center;
        color: #555;

        ::v-deep.el-form-item__label{
            text-align: left;
        }
    }

    .el-image {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
    }
}
</style>
